<template>
  <div class="packet-carrier-options">
    <el-radio-group :value="packetCarrier" size="small" @input="handleInput">
      <el-radio-button label="" >{{ $t('common.all') }}</el-radio-button>
      <el-radio-button
        v-for="carrier in carriers"
        :key="carrier"
        :label="carrier"
      >
        {{ carrier }} {{ packetCarrierNums ? `(${(packetCarrierNums[carrier] ? packetCarrierNums[carrier] : 0)})` : ''}}
      </el-radio-button>
    </el-radio-group>
  </div>
</template>

<script>
export default {
  props: {
    packetCarrier: {
      type: String,
      default: '',
    },
    packetCarrierNums: {
      type: Object,
      default: () => {
        return null
      }
    },
  },
  data() {
    return {
      carriers: [
          'FedEx',
          'estafeta',
          'DHL',
          'iMile',
          'Big',
          'REDPACK',
          'ampm',
      ],
    }
  },
  created() {

  },
  methods: {
    handleInput(val) {
      this.$emit('change', val);
    }
  }
}
</script>

<style scoped lang="less">

</style>
